<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>镜下识别</title>
		<base href="../../../" />
		<script src="lib/function/responsive.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="static/css/api.css" />
		<style>
			body{padding-top:1.3rem;height:100%;box-sizing: border-box;}
			#header{
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				background-color: #fff;
				z-index: 99;
				box-shadow: 0 0 10px 3px
				rgba(205, 205, 205, 0.45);
				/* box-shadow: 0rem 0rem 0.17rem 0.04rem
				rgba(205, 205, 205, 0.45); */
			}
			#header .header-box{
				display: flex;
				justify-content: space-between;
				height: 1.06rem;
			}
			#header .return{
				width: 1.4rem;
				height: 1.06rem;
				line-height: 1.06rem;
				box-sizing: border-box;
				padding-left: 0.65rem;
				font-size: 0.22rem;
				color: #333333;
				background: url(static/icon/back.png) no-repeat left 0.3rem center;
				background-size: 0.18rem;
			}
			#header .return:active,#header .home:active{
				opacity: 0.6;
			}
			#header .name{
				line-height: 1.06rem;
				font-size: 0.28rem;
				font-weight: bold;
				color: #333333;
			}
			#header .home{
				width: 1.4rem;
				height: 1.06rem;
				background: url(static/icon/home.png) no-repeat right 0.3rem center;
				background-size: 0.44rem;
			}
			.test{
				padding: 0 0.3rem;
			}
			.test-top{
				padding: 0.3rem 0;
				
			}
			.test-top .test-time span{
				display: inline-block;
				color: #fff;
				font-weight: normal;
				font-size: 0.3rem;
				margin-right: 0.6rem;
			}
			.test-top .test-time i{
				font-size: 0.48rem !important;
				font-weight: bold !important;
			}
			.test-top .test-time{
				/* width: 4.2rem; */
				display: inline-flex;
				align-items: center;
				min-width: 3.7rem;
				padding-right: 0.3rem;
				height: 0.8rem;
				text-align: left;
				border: solid 0.01rem #ff9e13;
				padding-left: 0.2rem;
				line-height: 0.8rem;
				font-size: 0.48rem;
				font-weight: bold;
				background: url(static/icon/exam.png) no-repeat left 0.1rem center;
				background-size: 1.8rem;
				color: #ff9e13;
			}
			.test-top .test-time-en{
				padding-left: 0.14rem;
			}
			.test-top  .test-time-en span{
				font-size: 0.28rem;
				margin-right: 0.4rem;
			}
			.test-con{
				height: 8.11rem;
				background-color: #f6f6f6;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.result{}
			.result .result-lis{
				display: inline-block;
				width: 1.6rem;
				height: 1.6rem;
				margin: 0 0.15rem;
				border-radius: 50%;
				background-color: #fff;
			}
			.result .result-lis.sucess{
				background-color: #00aa00;
			}
			.result .result-lis.fail{
				background-color: #ff0000;
			}
			.test-bottom{
				/* padding: 0.5rem 0; */
				text-align: center;
			}
			.test-bottom .rest-test{
				width: 1.61rem;
				height: 0.6rem;
				line-height: 0.6rem;
				background-color: #2691ff;
				box-shadow: 0.02rem 0.02rem 0.11rem 0.03rem 
					rgba(57, 141, 227, 0.52);
				border-radius: 0.1rem;
				margin: 0 auto 0.2rem;
				font-size: 0.18rem;
				color: #ffffff;
			}
			.test-bottom .rest-test:active{
				opacity: 0.6;
			}
			.test-bottom p{
				font-size: 0.18rem;
				color: #999999;
			}
			.test-bottom p span{
				color: #ff2b2b;
			}
			/* 考试结果弹窗 */
			.test-tc{
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0,0,0,0.5);
				padding-top: 1.4rem;
			}
			.test-tc-box{
				height: 100%;
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.test-tc-con{}
			.test-tc-txt{
				width: 7.2rem;
				height: 6rem;
				background-color: #ffffff;
				border-radius: 0.2rem;
				border: solid 0.07rem #ffdf11;
				position: relative;
			}
			.test-tc-time{
				text-align: center;
				line-height: 0.8rem;
				font-size: 0.28rem;
				color: #fff;
			}
			.test-tc-top{
				width: 6.99rem;
				height: 6.99rem;
				z-index: 2;
				background: url(static/icon/test-top1.png) no-repeat center;
				background-size: 100%;
				position: absolute;
				top: -3.5rem;
				color: #fff;
				text-align: center;
				padding-top: 3rem;
				font-size: 0.52rem;
				font-weight: bold;
			}
			.test-tc-en{
				padding-top: 3.06rem;
			}
			.test-tc-mide{
				width: 2.87rem;
				height: 2.88rem;
				background: url(static/icon/test1.png) no-repeat center;
				background-size: 100%;
				margin: 0.8rem auto 0.2rem;
				position: relative;
				z-index: 3;
			}
			.test-tc-bottom{
				overflow: hidden;
				display: flex;
			}
			.test-tc-lis{
				flex: 1;
				text-align: center;
				font-family: MicrosoftYaHei;
				font-size: 0.3rem;
				line-height: 0.6rem;
				color: #666666;
			}
			.test-tc-lis span{
				font-family: MicrosoftYaHei;
				font-size: 0.5rem;
				font-weight: bold;
				line-height: 0.61rem;
				color: #ff780b;
			}
			.test-tc-lis i{
				font-size: 0.29rem;
				color: #ff780b;
			}
			/* 操作部位 */
			.operate{
				display: flex;
				justify-content: center;
				align-items: center;
				height: 0.5rem;
				font-size: 0.28rem;
			}
			.operate-lis{
				margin: 0 0.1rem;
				color: #666666;
			}
			.operate-lis span{
				font-size: 0.34rem;
				font-weight: bold;
				color: #ff780b;
			}
			
			.test-tc-fail .test-tc-txt{border: solid 0.07rem #bbbbbb;}
			
			.test-tc-fail .fail{
				display: inline-block;
			}
			.test-tc-fail .success{
				display: none;
			}
			.test-tc-fail .test-tc-lis span{
				color: #bfbfbf;
			}
			.test-tc-fail .test-tc-lis i{
				color: #bfbfbf;
			}
			.test-tc-fail .test-tc-mide{
				background: url(static/icon/test2.png) no-repeat center;
				background-size: 100%;
			}
			.test-tc-fail .test-tc-top{
				background: url(static/icon/test-top2.png) no-repeat center;
				background-size: 100%;
			}
			/* 镜下识别 */
			.microscopic{
				width: 6.11rem;
				height: 7.15rem;
				background-color: #c6e0fc;
				border: solid 0.02rem #2691ff;
				position: relative;
				border-radius: 50%;
				padding-top: 4rem;
			}
			.microscopic-lis{
				width: 0.58rem;
				height: 0.58rem;
				border: solid 0.04rem #1890ff;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50%;
				font-size: 0.31rem;
				font-weight: bold;
				color: #2194ff;
			}
			.microscopic-lis::after{
				content: '';
				width: 0.04rem;
				height: 0.2rem;
				background-color: #1890ff;
				position: absolute;
				bottom: -0.23rem;
				left: 50%;
				margin-left: -0.02rem;
			}
			.microscopic-lis:nth-child(1){
				position: absolute;
				left: 1.5rem;
				top: 0.4rem;
			}
			.microscopic-lis:nth-child(2){
				position: absolute;
				left: 3rem;
				top: 1.7rem;
			}
			.microscopic-lis:nth-child(3){
				position: absolute;
				top: 2.17rem;
				right: 0.4rem;
			}
			.microscopic-lis:nth-child(4){
				position: absolute;
				left: 0.26rem;
				top: 2.48rem;
			}
			.microscopic-lis:nth-child(5){
				position: absolute;
				right: 0.26rem;
				top: 3.6rem;
			}
			.microscopic-top{
				text-align: center;
				font-family: SourceHanSansCN-Normal;
				font-size: 0.26rem;
				color: #093864;
			}
			.microscopic-top i{
				vertical-align: middle;
			}
			.microscopic-top span,.microscopic-botlis span{
				display: inline-block;
				vertical-align: middle;
				width: 0.44rem;
				height: 0.44rem;
				background-color: #83bfff;
				border: solid 0.02rem #1890ff;
				border-radius: 50%;
				margin-right: 0.04rem;
			}
			.microscopic-botcon{
				overflow: hidden;
				padding:0 0.8rem ;
				margin-top:0.4rem;
			}
			.microscopic-botcon .microscopic-botlis{
				float: left;
				width: 50%;
				text-align: center;
				font-family: SourceHanSansCN-Normal;
				font-size: 0.26rem;
				color: #093864;
			}
			.microscopic .success{
				color: #14cf14;
				border-color: #14cf14;
			}
			.microscopic .success::after{
				background-color: #14cf14;
			}
			.microscopic .fail{
				color: #ff0024;
				border-color: #ff0024;
			}
			.microscopic .fail::after{
				background-color: #ff0024;
			}
			/* 夹持训练 1.6倍*/
			.clamp{
				/* width: 4.08rem;
				height: 4.8rem; */
				width: 6.53rem;
				height: 7.68rem;
				position: relative;
				background: url(static/icon/clamp.png) no-repeat top center;
				background-size: 100%;
			}
			.clamp-sl{
				position: absolute;
				opacity: 0.85;
				width: 1.28rem;
				height: 1.28rem;
				border-radius: 50%;
				top: 2.94rem;
				left: 1.7rem;
			}
			
			.clamp-js{
				position: absolute;
				opacity: 0.85;
				width: 1.28rem;
				height: 1.28rem;
				border-radius: 50%;
				top: 2.94rem;
				left: 1.7rem;
			}
			.clamp-num,.clamp-txt{
				position: absolute;
				width: 100%;
				display: flex;
				justify-content: flex-start;
				padding:0 1.3rem 0 1.3rem;
				box-sizing: border-box;
			}
			.clamp-fail,.clamp-fail2{
				position: absolute;
				background-color: #ffff7e;
				opacity: 0.85;
				/* width: 0.8rem;
				height: 0.8rem; */
				width: 1.28rem;
				height: 1.28rem;
				border-radius: 50%;
				top: 2.94rem;
				left: 1.7rem;
				display: none;
			}
			.clamp-fail2{
				left: 3.51rem;
			}
			.clamp-num{
				/* font-size: 0.48rem; */
				font-size: 0.76rem;
				top: 1.5rem;
			}
			.clamp-txt{
				/* font-size: 0.48rem; */
				font-size: 0.76rem;
				/* bottom: 1.5rem; */
				bottom: 2.4rem;
				color: #13a327;
			}
			.clamp-txt span{
				display: none;
			}
			.clamp-num div,.clamp-txt div{
				width: 50%;
				text-align: center;
			}
			.clamp-sl.success,.clamp-js.success{
				background-color: #13a327;
			}
			.clamp-sl.fail,.clamp-js.fail{
				background-color: #ff0024;
			}
			.clamp-switch,.ferrule-switch,.thread-switch{
				width: 0.42rem;
				height: 0.42rem;
				position: absolute;
				opacity: 0.85;
				border-radius: 50%;
				bottom: 1.4rem;
				right: 1.21rem;

			}
			.clamp-switch.on,.ferrule-switch.on,.microscopic .clamp-switch.on{
				background-color: #13a327;
			}
			.clamp-switch.close,.ferrule-switch.close,.microscopic .clamp-switch.close{
				background-color: #ff0024;
			}
			.microscopic .clamp-switch{
				background-color: #7a7a7a;
				opacity: 1;
				right: 1.5rem;
			}
			/* 定位摆放 */
			.ferrule,.thread,.shear,.suture{
				width: 6.53rem;
				height: 7.68rem;
				position: relative;
				background: url(static/icon/ferrule.png) no-repeat top center;
				background-size: 100%;
			}
			.ferrule .ferrule-switch{
				bottom: 1.4rem;
				right: 1.22rem;
			}
			.ferrule .ferrule-lis,.thread .thread-lis{
				width: 0.48rem;
				height: 0.48rem;
				border-radius: 50%;
				position: absolute;
				opacity: 0.85;
			}
			.ferrule .ferrule-lis.success,.suture .suture-lis.success{
				background-color: #13a327;
			}
			.ferrule .ferrule-lis.fail,.suture .suture-lis.fail{
				
				background-color: #ff0024;
			}
			.ferrule-lis:nth-child(1),.ferrule-lis:nth-child(4),.ferrule-lis:nth-child(5){
				width: 0.32rem;
				height: 0.32rem;
			}
			.ferrule-lis:nth-child(1){
				top: 3.26rem;
				left: 2.02rem;
			}
			.ferrule-lis:nth-child(2){
				top: 4.29rem;
				left: 1.95rem;
			}
			
			.ferrule-lis:nth-child(3){
				top: 2.5rem;
				left: 3.01rem;
			}
			.ferrule-lis:nth-child(4){
				top: 3.94rem;
				left: 3.09rem;
			}
			.ferrule-lis:nth-child(5){
				top: 3.26rem;
				right: 2.05rem;
			}
			.ferrule-lis:nth-child(6){
				top: 4.29rem;
				right: 2rem;
			}
			
			/* 飞跃龙门 */
			.thread{
				background: url(static/icon/thread.png) no-repeat top center;
				background-size: 100%;
			}
			.thread .thread-lis{
				/* width: 0.42rem;
				height: 0.42rem; */
				width: 0.48rem;
				height: 0.48rem;
			}
			.thread .thread-lis.fail{
				/* background: url(static/icon/thread_fail.png) no-repeat top center;
				background-size: 100%; */
				background-color: #ff0024;
			}
			.thread .thread-lis.success{
				background-color: #13a327;
				/* background: url(static/icon/thread_success.png) no-repeat top center; */
				/* background-size: 100%; */
			}
			.thread-lis:nth-child(1){
				top: 4.5rem;
				left: 1.81rem;
				z-index: 9;
			}
			.thread-lis:nth-child(2){
				top: 2.55rem;
				left: 4.20rem;
				z-index: 9;

			}
			.thread-lis:nth-child(3){
				top: 3.65rem;
				left: 1.82rem;
				width: 3rem;
				height: 0.2rem;
				border-radius: 0.4rem;
				transform: rotate(-39deg);
				z-index: 8;

			}
			/* .thread-lis:nth-child(3){
				top: 2.94rem;
				left: 3.07rem;
			} */
			.thread-lis:nth-child(4){
				top: 4.1rem;
				left: 2.98rem;
			}
			.thread-lis:nth-child(5){
				top: 3.68rem;
				right: 2.02rem;
			}
			
			.thread-lis:nth-child(6){
				top: 2.64rem;
				right:1.9rem;
			}
			.thread .thread-switch{
				bottom: 1.58rem;
				right: 1.05rem;
			}
			/* 剪切训练 */
			.shear{
				position: relative;
				background: url(static/icon/shear.png) no-repeat top center;
				background-size: 100%;
			}
			.shear .shear-lis{
				width: 3.36rem;
				height: 3.36rem;
				display: none;
				position: absolute;
				left: 50%;
				top: 2.21rem;
				margin-left: -1.68rem;
				opacity: 0.65;
			}
			.shear .shear-lis.fail1{
				background-color: #ff0024;
				display: block;
			}
			.shear .shear-lis.fail2{
				background-color: #ececec;
				display: block;
			}
			.shear .shear-lis.fail2 .shear-lis-con{
				background-color: #ff0024;
			}
			.shear .shear-lis-con{
				width: 1.76rem;
				height: 1.76rem;
				margin: 0.8rem auto;
				border-radius: 50%;
				background-color: #ececec;
			}
			/* .shear .fail{
				background-color: #ff0024;
			} */
			.shear .shear-switch{
				bottom: 0.76rem;
				right: 1.01rem;
			}
			/* 缝合训练 */
			.suture{
				position: relative;
				background: url(static/icon/suture.png) no-repeat top center;
				background-size: 100%;
			}
			.suture .suture-lis{
				width: 0.8rem;
				height: 1.06rem;
				left: 2.86rem;
				opacity: 0.68;
				border-radius: 0.36rem;
				position: absolute;
			}
			.suture-lis:nth-child(1){
				top: 2.11rem;
			}
			.suture-lis:nth-child(2){
				top: 3.26rem;
			}
			.suture-lis:nth-child(3){
				top: 4.4rem;
			}
			/* 数据弹窗调试使用 */
			.data-box{
				width: 3.5rem;
				height: 80%;
				position: fixed;
				z-index: 9999;
				background-color: #fff;
				border: 1px solid #ff0000;
				border-radius: 10rpx;
				padding: 0.2rem;
				right: 0.4rem;
				bottom: 5%;
				overflow-y: auto;
			}
			.data-box li{
				line-height: 0.4rem;
				font-size: 0.24rem;
			}
		</style>
	</head>
	<body>
		<div id="header">
			<div class="header-box">
				<div i18n="return" class="return" id="close">返回</div>
				<div class="name"></div>
				<div class="home" id="close"></div>
			</div>
		</div>
		<div class="test">
			<div class="test-top">
				<div class="test-time"><span i18n="exam.time">考试时间</span><i>00:00</i></div>
			</div>
			<div class="test-con">
				<!-- 镜下识别 -->
				<div class="microscopic hidden">
					<!-- 成功加上类名success 失败加上类名fail -->
					<div class="microscopic-lis">A</div>
					<div class="microscopic-lis">B</div>
					<div class="microscopic-lis">C</div>
					<div class="microscopic-lis">D</div>
					<div class="microscopic-lis">E</div>
					<div class="clamp-switch"></div>
					<!-- <div class="microscopic-bot">
						<div class="microscopic-top">
							<span></span><i>腹腔镜通道</i>
						</div>
						<div class="microscopic-botcon">
							<div class="microscopic-botlis">
								<span></span>
								<p>器械通道A</p>
							</div>
							<div class="microscopic-botlis">
								<span></span>
								<p>器械通道B</p>
							</div>
						</div>
					</div> -->
				</div>
				<!-- 夹持训练 -->
				<div class="clamp hidden">
					<!-- <div class="clamp-js"></div>
					<div class="clamp-sl"></div> -->
					<div class="clamp-fail"></div>
					<div class="clamp-fail2"></div>
					<div class="clamp-num">
						<div class="left"><span>10</span></div>
						<div class="right"><span>10</span></div>
					</div>
					<div class="clamp-txt">
						<div class="left">
							<span>ok</span>
						</div>
						<div class="right">
							<span>ok</span>
						</div>
					</div>
					<div class="clamp-switch"></div>
				</div>
				<!-- 定位摆放 -->
				<div class="ferrule hidden">
					<div class="ferrule-lis"></div>
					<div class="ferrule-lis"></div>
					<div class="ferrule-lis"></div>
					<div class="ferrule-lis"></div>
					<div class="ferrule-lis"></div>
					<div class="ferrule-lis"></div>
					<div class="clamp-switch ferrule-switch"></div>
				</div>
				<!-- 飞跃龙门 -->
				<div class="thread hidden">
					<div class="thread-lis"></div>
					<div class="thread-lis"></div>
					<div class="thread-lis"></div>
					<!-- 2024-02-29 -->
					<!-- <div class="thread-lis "></div>
					<div class="thread-lis "></div>
					<div class="thread-lis "></div>
					<div class="thread-lis "></div> -->
					<div class="clamp-switch"></div>
				</div>
				<!-- 剪切训练 -->
				<div class="shear hidden">
					<!-- fail1触发边界，fail2触发内部 -->
					<div class="shear-lis">
						<div class="shear-lis-con"></div>
					</div>
					<div class="clamp-switch"></div>
				</div>
				<!-- 缝合训练 -->
				<div class="suture hidden">
					<div class="suture-lis"></div>
					<div class="suture-lis"></div>
					<div class="suture-lis"></div>
					<div class="clamp-switch"></div>
				</div>
			</div>
			<div class="test-bottom">
				<!-- <div class="rest-test">重新考试</div> -->
				<!-- <p>倒计时  <span></span> 自动跳转到首页</p> -->
			</div>
		</div>
		<!-- 考试结果弹窗 hidden-->
		<div class="test-tc hidden">
			<div class="test-tc-box">
				<!-- 失败加上类名test-tc-fail -->
				<div class="test-tc-con">
					<div class="test-tc-txt">
						<div class="test-tc-top">
							<span class="success" i18n="exam.success">恭喜你</span>
							<span class="fail hidden" i18n="exam.fail">很遗憾</span>
						</div>
						<div class="test-tc-mide"></div>
						<div class="test-tc-bottom">
							<div class="test-tc-lis">
								<span>0 <i>次</i></span>
								<p>触碰错误</p>
							</div><div class="test-tc-lis">
								<span>0 <i>分</i></span>
								<p>操作分</p>
							</div>
							<div class="test-tc-lis">
								<span>0 <i>分</i></span>
								<p>时间分</p>
							</div>
							
							<div class="test-tc-lis">
								<span>0 <i>分</i></span>
								<p>总分</p>
							</div>
						</div>
						<!-- 操作部位 -->
						<div class="operate">
							<div class="operate-lis">左手触碰错误：<span>0</span> 次</div>
							<div class="operate-lis">右手触碰错误：<span>0</span> 次</div>
							<!-- <div class="operate-lis"><span>左手操作</span></div> -->
						</div>
					</div>
					<!-- 倒计时 -->
					<div class="test-tc-time" i18n="test.tc.time">倒计时 <span></span> 自动跳转到首页</div>
				</div>
			</div>
		</div>
		<!-- 测试数据调试弹窗开始-->
		<!-- <div class="data-box">
			<ul class="data-box-ul">
				<li>AA 05 01 00 B0</li>
			</ul>
		</div> -->
		<!-- 测试数据调试弹窗结束-->
		<script type="text/javascript" src="runtime/pub.js"></script>
		<script src="dist/i18n.js"></script>
		<script type="text/javascript" src="runtime/index/test.js"></script>
		<!-- 测试调试增加 -->
		<script type="text/javascript">
			// $(function(){
			// 	for (let i = 0; i < 150; i++) {
			// 		let data = '<li>AA 05 01 00 B0' + i + '</li>';
			// 		$('.data-box-ul').prepend(data)
			// 		if($('.data-box-ul li').length > 100){
			// 			$('.data-box-ul li').last().remove()
			// 		}
			// 	}
			// })
		</script>
	</body>
</html>
